html, body
  line-height: 1
  color: #333
  height: 100%
  width: 100%
  -webkit-font-smoothing: antialiased
  touch-action: manipulation
  -webkit-tap-highlight-color: transparent
  -webkit-text-size-adjust: 100%

// no-scrollbar()

body
  font-size: 1rem
  background: #fff
  min-width 320px

*, html, body, a, button, input, select, textarea
  font-family: -apple-system, Helvetica, 'Hiragino Sans GB W3', arial, sans-serif
  box-sizing: border-box
  user-select: none

button, input, select, textarea
  outline: none
  -webkit-appearance: none
  -webkit-user-modify: read-write-plaintext-only

a
  color: #333
  text-decoration: none

.clearfix
  clearfix()

.centre-block
    display: block
    margin-right: auto
    margin-left: auto

.fr, .pull-right
  float:right!important

.fl, .pull-left
  float:left!important

.hide
  display:none!important

[v-cloak]
  display: none

.show
  display:block!important

.visible
  visibility:visible

.invisible
  visibility:hidden

.hidden
  display:none!important
  visibility:hidden

.ellipsis
  overflow(ellipsis)

.z-loading-box, .z-toast-box
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 10001;
    .loading-mask, .toast-mask
        position: fixed;
        top: 0;
        z-index: 9999;
        height: 100%;
        width: 100%;
        background-color rgba(0, 0, 0, 0.8);

    $cWidth = px2rem(140px);
    .load-container
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -($cWidth / 2);
        margin-top: @margin-left;
        z-index: 10000;
        width: px2rem(140px)
        height: px2rem(140px)

      .loader
          // position: relative;
          // top: 7px;
          // margin: auto;
          border-top: px2rem(6px) solid rgba(255, 200, 87, 0.2);
          border-right: px2rem(6px) solid rgba(255, 200, 87, 0.2);
          border-bottom: px2rem(6px) solid rgba(255, 200, 87, 0.2);
          border-left: px2rem(6px) solid #ffc857;
          animation: z-loading 1.1s infinite linear;

      .load-img, .loader, .loader:after
          width: $cWidth
          height: @width
          border-radius(50%)

      .load-img
          position: absolute;
          width: 62px;
          height: 62px;
          top: 50%;
          left: 50%;
          margin-top: -31px;
          margin-left: -31px;
          overflow: hidden;
          img
              border-radius(50%)
      .load-word
          position: absolute;
          top: 0;
          color: #fff;
          line-height: $cWidth;
          width: $cWidth
          text-align: center;

.z-toast-box
    .toast-content
        position: absolute;
        top: 50%;
        left: 50%;
        transform translate3d(-50%, -50%, 0)
        background-color rgba(93, 93, 93, 0.8)
        z-index 1010
        width px2rem(634px)
        color: #fff;
        padding px2rem(32px) px2rem(18px)
        text-align: center;
        word-break: break-all;
        font-size px2rem(28px)
        line-height px2rem(36px)
        min-height px2rem(36px)
        border-radius px2rem(8px)

@keyframes z-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
